<template>
  <h2>TableReport</h2>
  <p>
    通常用于一些报表数据的展示。本组件与 table-base 组件完全独立，当此组件传入的
    data 无数据时，会显示 empty-bar。
  </p>
  <p>
    本组件的 config 和 data 接收后会转换为适合 el-table 的 columns 和 data。
  </p>
  <h3>TableReport 属性</h3>
  <table-info type="props" :data="reportProps"></table-info>
  <h3>TableReport Columns</h3>
  <table-info type="props" :data="columnsProps"></table-info>
  <h3>
    案例：演示 thLabelFn，leftTopLabel 及 config 的
    fomatter、isRowHeader、labelStyle、valueSlot
  </h3>
  <code-demo :code="code1">
    <table-report
      :data="data1"
      :config="config1"
      :thLabelFn="(row) => `${row.year}年报`"
      :leftTopLabel="['指标', '报告期']"
    >
      <template #rate="{ row, column }">
        <span v-if="column.property === 'th0'">
          {{ row[column.property] }}
          <el-icon><Position /></el-icon>
        </span>
        <span v-else>
          {{ row[column.property] }}
          <el-icon><Check /></el-icon>
        </span>
      </template>
    </table-report>
  </code-demo>

  <h3>案例：演示 fixedLeftCols、cellWidth、labelCellWidth</h3>
  <code-demo :code="code2">
    <table-report
      cellWidth="200px"
      labelCellWidth="150px"
      :data="data2"
      :config="config2"
      :thLabelFn="(row) => `${row.year}年`"
      :fixedLeftCols="[0]"
    ></table-report>
  </code-demo>
</template>

<script setup>
// prettier-ignore
const reportProps = [
  { name: 'config', desc: '每行的配置信息，默认将第一行设置为标题，其他行的第一个单元格显示为标题。', type: 'Array<{ label: string, prop: string, isRowHeader: boolean, formatter?: Function(row, column, cellValue), labelStyle?: Object, labelSlot?: string, valueSlot?: string }>' },
  { name: 'data', desc: '纵向数据内容。如 [{year: "2001", amount: 100}, {year: "2002", amount: 200}]。', type: 'Array<Object>' },
  { name: 'border', desc: '是否带有纵向边框。同 element-plus 的配置。', type: 'boolean', default: 'true' },
  { name: 'stripe', desc: '是否为斑马纹 table。同 element-plus 的配置。', type: 'boolean', default: 'true' },
  { name: 'maxHeight', desc: 'Table 的最大高度。 合法的值为数字或者单位为 px 的高度。同 element-plus 的配置。', type: 'number,string' },
  { name: 'cellAlign', desc: '所有单元格的对齐方式。', type: 'string', enums: '"left"、"right"、"center"' },
  { name: 'cellWidth', desc: '所有单元格的宽度。', type: 'number,string' },
  { name: 'cellMinWidth', desc: '所有单元格的最小宽度。', type: 'number,string' },
  { name: 'labelCellAlign', desc: '第一列标题单元格的对齐方式，可覆盖cellAlign。', type: 'string', enums: '"left"、"right"、"center"' },
  { name: 'labelCellWidth', desc: '第一列标题单元格的宽度，可覆盖cellWidth。', type: 'number,string' },
  { name: 'labelCellMinWidth', desc: '第一列标题单元格的最小宽度，可覆盖cellMinWidth。', type: 'number,string' },
  { name: 'fixedLeftCols', desc: '左侧固定的列的序号，效果同 fixed。', type: 'Array<number>' },
  { name: 'leftTopLabel', desc: '对角 label 的两个文案，有此值时会使用 table-th-group 覆盖本身的label。', type: '[string, string]' },
  { name: 'thLabelFn', desc: '对行标题 label 的计算（即 column.label），需要传入。参数 index 从0开始。fixedLeftCols 会覆盖左上角的标题。行标题暂不支持通过插槽自定义。', type: 'Function(dataCol, index)', default: '(dataCol, index) => `th${index}`' },
  { name: 'thPropFn', desc: '对行标题 prop 的计算（即 column.prop），可使用默认的。参数 index 从0开始。', type: 'Function(dataCol, index)', default: '(dataCol, index) => `th${index}`' },
]

// prettier-ignore
const columnsProps = [
  { name: 'label', desc: '列标题', type: 'string' },
  { name: 'prop', desc: '字段名称', type: 'string' },
  { name: 'formatter', desc: '用来格式化内容，如果返回空值，则会显示 emptyCellText。参数 row 和 col 都是经过转化的，prop 由 thPropFn 执行得到。', type: 'Function(row, col, cellValue)' },
  { name: 'valueSlot', desc: '列值的插槽名，包括第一列标题，接收 el-table 的 scope 参数。', type: 'string' },
  { name: 'isRowHeader', desc: '是否将此行合并为一个单元格，只显示标题，受 labelStyle 影响。', type: 'boolean' },
  { name: 'labelStyle', desc: '对 label 设置样式。', type: 'Object' },
]

const code1 = `<table-report
  :data="data1"
  :config="config1"
  :thLabelFn="(row) => \`\${row.year}年报\`"
  :leftTopLabel="['指标', '报告期']"
>
  <template #rate="{ row, column, $index }">
    <span v-if="column.property === 'th0'">
      {{ row[column.property] }}
      <el-icon><Position /></el-icon>
    </span>
    <span v-else>
      {{ row[column.property] }}
      <el-icon><Check /></el-icon>
    </span>
  </template>
</table-report>

const data1 = [
  { year: '2001', rate: '10%', amount: '4600', time: '2001-12-13' },
  { year: '2002', rate: '12%', amount: '5000', time: '2002-12-08' },
  { year: '2003', rate: '15%', amount: '6000', time: '2003-12-13' },
]

const config1 = [
  { label: '报告期', prop: 'year' },
  { label: '增长率', prop: 'rate', valueSlot: 'rate' },
  { label: '销售额', prop: 'amount', formatter: (row, col, value) => {
    return col.prop !== 'th0' ? \`\${value}万元\` : value
  }},
  { label: '单行标题', isRowHeader: true, labelStyle: { color: 'blue' } },
  { label: '（缩进）发布日期', prop: 'time', labelStyle: { textIndent: '20px', color: 'blue' } },
]`

// prettier-ignore
const data1 = [
  { year: '2001', rate: '10%', amount: '4600', time: '2001-12-13' },
  { year: '2002', rate: '12%', amount: '5000', time: '2002-12-08' },
  { year: '2003', rate: '15%', amount: '6000', time: '2003-12-13' },
]

// prettier-ignore
const config1 = [
  { label: '报告期', prop: 'year' },
  { label: '增长率', prop: 'rate', valueSlot: 'rate' },
  { label: '销售额', prop: 'amount', formatter: (row, col, value) => {
    return col.prop !== 'th0' ? `${value}万元` : value
  }},
  { label: '单行标题', isRowHeader: true, labelStyle: { color: 'blue' } },
  { label: '（缩进）发布日期', prop: 'time', labelStyle: { textIndent: '20px', color: 'blue' } },
]

const code2 = `<table-report
  cellWidth="200px"
  labelCellWidth="150px"
  :data="data2"
  :config="config2"
  :thLabelFn="(row) => \`\${row.year}年\`"
  :fixedLeftCols="[0]"
></table-report>

const data2 = [
  { year: '2001', amount: '4600' },
  { year: '2002', amount: '5000' },
  { year: '2003', amount: '6000' },
  { year: '2004', amount: '6000' },
  { year: '2005', amount: '6000' },
  { year: '2006', amount: '6000' },
  { year: '2007', amount: '6000' },
  { year: '2008', amount: '6000' },
  { year: '2009', amount: '6000' },
  { year: '2010', amount: '6000' },
  { year: '2011', amount: '6000' },
  { year: '2012', amount: '6000' },
  { year: '2013', amount: '6000' },
  { year: '2014', amount: '6000' },
  { year: '2015', amount: '6000' },
]

const config2 = [
  { label: '报告期', prop: 'year' },
  { label: '销售额', prop: 'amount' },
]`

// prettier-ignore
const data2 = [
  { year: '2001', amount: '4600' },
  { year: '2002', amount: '5000' },
  { year: '2003', amount: '6000' },
  { year: '2004', amount: '6000' },
  { year: '2005', amount: '6000' },
  { year: '2006', amount: '6000' },
  { year: '2007', amount: '6000' },
  { year: '2008', amount: '6000' },
  { year: '2009', amount: '6000' },
  { year: '2010', amount: '6000' },
  { year: '2011', amount: '6000' },
  { year: '2012', amount: '6000' },
  { year: '2013', amount: '6000' },
  { year: '2014', amount: '6000' },
  { year: '2015', amount: '6000' },
]

// prettier-ignore
const config2 = [
  { label: '报告期', prop: 'year' },
  { label: '销售额', prop: 'amount' },
]
</script>
